﻿<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>HandyTab Home</title>
    <link rel="icon" type="image/png" href="chrome://handytab/skin/handytab.png" />

    <style type="text/css">
      TD A:visited { font-style: italic; }
    </style>
    
    <script type="text/javascript">
      function talk_to_addon(subject, args) {
        var element = document.getElementById("handytab-api");
        element.setAttribute("subject", subject);
        if (args != null) element.setAttribute("args", args);
        
        var evt = document.createEvent("Events");
        evt.initEvent("HandyTabAddonEvent", true, false);
        element.dispatchEvent(evt);
      }
      
      function days_elapsed(d1, d2) {
        var days = Date.UTC(d1.getFullYear(), d1.getMonth(), d1.getDate()) - 
                   Date.UTC(d2.getFullYear(), d2.getMonth(), d2.getDate());
        return days / 1000 / 60 / 60 / 24;
      }
      
      function get_time_string(time) {
        var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/;
        var a = reISO.exec(time);
        if (!a) return "";
        time = new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]));
        var days = days_elapsed(new Date(), time);
        return (days == 0 ? "Today " : "" + days + "&nbsp;days&nbsp;ago ") + time.toLocaleTimeString();
      }
      
      function update_table(marks) {
        var table = document.getElementById("marks-table");
        
        for (var i = 0; i < marks.length; i++) {
          var row = table.insertRow(-1);

          var cell = row.insertCell(0);
          cell.innerHTML = '<input type="checkbox"/>';

          cell = row.insertCell(1);
          cell.innerHTML = get_time_string(marks[i].time);

          cell = row.insertCell(2);
          cell.style.textAlign = "center";
          cell.innerHTML = '<a href="' + marks[i].refer + '"><img border="0" height="16" width="16" src="' + marks[i].icon + '"/></a>';

          cell = row.insertCell(3);
          cell.innerHTML = '<a href="' + marks[i].url + '">' + marks[i].linktext + '</a>';
        }
      }
      
      function on_data_ready(event) {
        var element = document.getElementById("handytab-api");
        var data = element.getAttribute("data");
        var marks = JSON.parse(data);
        update_table(marks);
        element.setAttribute("data", "");
      }
      
      function init() {
        window.addEventListener("HandyTabHtmlEvent", on_data_ready, false);
        talk_to_addon("fetch-rows", null);
      }
      
      function do_select_all(event) {
        var cbAll = event.target;
        var table = document.getElementById("marks-table");

        for (var r = table.rows.length - 1; r > 0; r--) {
          var row = table.rows[r];
          var cell = row.cells[0];
          var cb = cell.firstChild;
          cb.checked = cbAll.checked;
        }
      }
      
      function remove_items(type) {
        var items = [];
        var table = document.getElementById("marks-table");
        
        switch (type) {
          case 0:
            for (var r = table.rows.length - 1; r > 0; r--) {
              var row = table.rows[r];
              var cell = row.cells[3];
              var link = cell.firstChild;
              var style = window.getComputedStyle(link, null);
              if (style.fontStyle == "italic") {
                table.deleteRow(r);
                items.push(r - 1);
              }
            }
            talk_to_addon("remove-rows", items);
            return;
          case 1:
            for (var r = table.rows.length - 1; r > 0; r--) {
              var row = table.rows[r];
              var cell = row.cells[0];
              var cb = cell.firstChild;
              if (cb.checked) {
                table.deleteRow(r);
                items.push(r - 1);
              }
            }
            talk_to_addon("remove-rows", items);
            return;
          case 2:
            for (var r = table.rows.length - 1; r > 0; r--) {
              table.deleteRow(r);
            }
            talk_to_addon("remove-rows", null);
            return;
        }
      }
    </script>
  </head>
  <body onload="init()" onunload="var nocache = true;">
    <div id="handytab-api" style="display: none" data=""></div>
    <p>
      <span align="left" style="color: blue;">
        <strong>HandyTab Marks List:</strong>
        <input type="button" value="Remove Readed" onclick="remove_items(0)">
        <input type="button" value="Remove Selected" onclick="remove_items(1)">
        <input type="button" value="Remove All" onclick="remove_items(2)">
        <a href="http://code.google.com/p/handytab/w/list">Help</a>
      </span>
    </p>
    <p>
    <table id="marks-table" align="center" border="1" cellpadding="0" cellspacing="0" style="width: 100%;">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" onclick="do_select_all(event)"/></th>
          <th scope="col">Time</th>
          <th scope="col">Refer</th>
          <th scope="col" style="width: 100%;">Marked Links</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </body>
</html>
